<template>
  <div class="common-layout">
    <el-container >
      <el-main >
        <el-card class="item" style="height: 450px">
          <template #header>
            <div class="card-header">
              <span>文创区域</span>
              <!--          <el-button class="button" text>Operation button</el-button>-->
            </div>
          </template>
          <div class="area">
            <img :src="imgUrl" style="width: 240px;height: 350px">
          </div>
        </el-card>
        <el-card class="item" style="height: 450px">
          <template #header>
            <div class="card-header">
              <span>精美伞类</span>
              <!--          <el-button class="button" text>Operation button</el-button>-->
            </div>
          </template>
          <div class="content">
            <img src="https://gd2.alicdn.com/imgextra/i3/2207623661559/O1CN01klsTS81NO4CRqe1OO_!!2207623661559.jpg" style="width: 250px;height: 350px" title="点击显示详情"/>
            <span>
              <h1>山海经三折创意中国风晴雨伞</h1>
              <p>品牌: 博市集;功能: 防晒;流行元素: 手绘;插画颜色分类: 青鸟 句芒;伞布: 聚酯纤维</p>
              <p>半径: 48cm(含)-53cm(含);伞面涂层: 黑胶;伞的种类: 晴雨伞;适用对象: 成年人;性别: 女;伞杆材质: 铝合金;款式: 三折伞</p>
            </span>
          </div>
        </el-card>
        <el-card class="item" style="height: 450px">
          <template #header>
            <div class="card-header">
              <span>品质生活</span>
              <!--          <el-button class="button" text>Operation button</el-button>-->
            </div>
          </template>
          <div class="content">
            <img src="https://gd3.alicdn.com/imgextra/i3/2207623661559/O1CN01uEG9rg1NO45YuHyPv_!!2207623661559.jpg" style="width: 250px;height: 350px" title="点击显示详情"/>
            <span>
<!--              颜色分类: 绿色 拱形 蓝白 曲线;花器种类: 台面花瓶;组合形式: 单只/束;适用场景: 居家-->
              <h1>亚克力花艺器具摆件</h1>
              <p>材质: 塑料;尺码: 小号;风格: 简约 现代;</p>
              <p>颜色分类:绿色拱形 蓝白曲线;花器种类:台面花瓶;组合形式:单只/束;适用场景:居家</p>
            </span>
          </div>
        </el-card>
        <el-card class="item" style="height: 450px">
          <template #header>
            <div class="card-header">
              <span>一扇清风</span>
              <!--          <el-button class="button" text>Operation button</el-button>-->
            </div>
          </template>
          <div class="content">
            <img src="https://img.alicdn.com/imgextra/i3/2207623661559/O1CN015Sg0s11NO4FDV2HA2_!!2207623661559.jpg" style="width: 250px;height: 350px" title="点击显示详情"/>
            <span>
<!--              流行元素: 复古;颜色分类: 黑骨 竹色骨;扇面材质: 绫绢;
打开扇面形状: 扇形;扇面工艺: 印刷;扇骨材质: 竹扇子;类型: 工艺扇;适用人群: 大众-->
              <h1>古典花卉绢面扇子</h1>
              <p> 流行元素: 复古;颜色分类:竹色骨;</p>
              <p>扇面材质: 绫绢;打开扇面形状: 扇形;扇面工艺: 印刷;扇骨材质: 竹扇子;类型: 工艺扇;适用人群: 大众</p>

            </span>
          </div>
        </el-card>
        <el-card class="item" style="height: 450px">
          <template #header>
            <div class="card-header">
              <span>品味文具</span>
              <!--          <el-button class="button" text>Operation button</el-button>-->
            </div>
          </template>
          <div class="content">
            <img src="https://gd2.alicdn.com/imgextra/i4/2207623661559/O1CN01lxkpHJ1NO44ckDSNY_!!2207623661559.jpg" style="width: 250px;height: 350px" title="点击显示详情"/>
            <span>
<!--              图案: 植物 花卉 ;颜色分类: 君子梅 君子兰 君子竹 君子菊;元素年代: 近现代文化创意;文具类型: 本-->
              <h1>梅兰竹菊四君子古风笔记本</h1>
              <p>图案: 植物 花卉 ;颜色分类: 君子梅 君子兰 君子竹 君子菊;</p>
              <p>年代: 近现代文化创意;文具类型: 本</p>
            </span>
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import request from "../../../../front_admin/src/utils/request";
export default {
  data(){
    return{
      imgUrl:require('../../assets/img/mall/taobao.png')
    }
  }
}
</script>

<style scoped>
.item{
  width:400px;
  margin:5px 5px;
}

.area{
  width: 260px;
  height: 360px;
  margin-right: 6px;
}
.el-aside{
  background-color: #d9ecff;
  height: 450px;
}
.el-main{
  background-color:#ecf5ff;
  height: 500px;
  display: flex;
  margin-bottom: 10px;
}

.common-layout{
  text-align: center;
}

.content{

  float: left;
  position: relative;
  /*box-shadow: 3px 3px 10px #666;*/
  overflow:hidden;
}
.content span{
  width: 250px;
  height: 350px;
  background: #333;
  position: absolute;
  left: -500px;
  top: 0px;
  filter: Alpha(opacity=80);
  -moz-opacity: 0.8;
  opacity: 0.8;
  padding: 20px;
  -webkit-transition: left 0.5s ease;
}

.content span h1{
  height: 20px;
  color: #fff;
  font-size:16px;
  text-align: center;
  position: relative;
  left: -500px;
  -webkit-transition: left 1s ease;
}

.content span p{
  line-height: 25px;
  font-size:14px;
  color: #fff;
  position: relative;
  overflow-wrap: break-word;
  left: -500px;
  -webkit-transition: left 1s ease;
}

.content:hover span{
  left:0px;
}

.content:hover span h1{
  left: 0px;
}

.content:hover span p{
  left: 0px;
}
</style>